<template>
	<view>
		<u-popup :show="show" :round="10" @close="close">
			<view class="popupTitle">
				<view @click="chooseAll">全选</view>
				<view>流程</view>
				<u-icon name='close' @click='close' />
			</view>
			<view class="popupBody">
				<z-paging :auto='false' ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
					:default-page-no="1" :default-page-size="10">
					<view :class="{active:choose.includes(item.id)}" v-for="(item, index) in data" :key="index" class="processItem" @click="chooseItem(item.id)">
						<u-text :lines='1' :text='`${index+1}·${item.title}`' size='24rpx'/>
						<u-icon v-if="choose.includes(item.id)" name='checkmark' size='24rpx' color='green'/>
					</view>
				</z-paging>
			</view>
			<view style="margin-top: 10rpx;padding: 0 40rpx;">
				<u-button @click='confirm' :disabled="disabled" v-if="choose.length" color="#3975c6">
					确认
				</u-button>
				<u-button @click='confirm' :disabled="disabled" v-else>
					确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['show','customer_id','ids'],
		data() {
			return {
				data: [],
				loading: true,
				choose:[],
				disabled:false
			}
		},
		watch: {
			show() {
				this.choose=[]
				this.$refs.paging.reload()
			}
		},
		methods: {
			close() {
				if(this.disabled)return
				this.$emit('close')
			},
			query(page, size) {
				let obj = {
					page,
					size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Process.List(obj).then(res => {
					console.log(this.ids)
					this.$refs.paging.complete(res.data.process.filter(item=>!this.ids.includes(item.id)))
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.$u.toast(err.message)
					uni.hideLoading()
				})
			},
			chooseItem(id){
				if(this.choose.includes(id)){
					this.choose=this.choose.filter(item=>item!=id)
				}else{
					this.choose.push(id)
				}
			},
			confirm(){
				if(this.choose.length==0){
					uni.$u.toast('请选择流程')
					return
				}
				this.disabled=true
				this.$api_company.Decorate.Process.Add(this.customer_id,{process_ids:this.choose}).then(res=>{
					this.disabled=false
					this.close()
					this.$emit("reload")
				}).catch(err=>{
					this.disabled=false
					uni.$u.toast(err.message)
				})
			},
			chooseAll(){
				this.choose=this.data.map(item=>item.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userInfoBox {
		display: flex;
		margin-bottom: 20rpx;

		>view:nth-child(2) {
			margin-left: 10px;
			flex: 1;
			display: flex;
			height: 100rpx;
			flex-direction: column;
			justify-content: space-between;
			border-bottom: 1rpx solid #f1f1f1;
			padding: 0 0 10rpx 0;
		}
	}
	.processItem{
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		background-color: #ddd;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 0 10rpx #ddd;
		
	}
	.active{
		border: 1rpx solid green !important;
		background-color: rgba(0, 255, 0, 0.2) !important;
	}
</style>